<!--
  功能：doctor表格的项目编辑
  作者：zzb
  邮箱：2283325110@qq.com
  时间：2021年2月07日 16:46:52
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="">
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="600px"
      @close="close"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="昵称" prop="userName">
          <el-input v-model.trim="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input v-model.trim="form.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.trim="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-input v-model.trim="form.gender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.trim="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model.trim="form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { updateDoctor, addDoctor } from '@/api/doctor'
  export default {
    // 组件名称
    name: 'FormEdit',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
      return {
        title: '修改信息',
        form: {},
        dialogFormVisible: false,
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 以下是生命周期钩子
    /**
     * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
     */
    created() {},
    /**
     * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
     * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
     */
    mounted() {},
    // 组件方法
    methods: {
      showEdit(row) {
        if (row) {
          // 将编辑的表格当前行的内容赋给表单
          this.form = Object.assign({}, row)
        } else {
          this.title = '添加'
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$emit('save')
        this.dialogFormVisible = false
      },
      modify(data) {
        updateDoctor(data)
          .then((res) => {
            this.$baseMessage(res.msg, 'success')
          })
          .catch((error) => {})
      },
      save() {
        if (this.title == '修改信息') {
          const { msg } = this.modify(this.form)
          this.$baseMessage(msg, 'success')
        } else {
          const { msg } = addDoctor(this.form)
          this.$baseMessage(msg, 'success')
        }
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
        this.$emit('save')
        this.form = this.$options.data().form
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped></style>
